<!DOCTYPE HTML>
<html lang>
<head><meta name="generator" content="Hexo 3.9.0">
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="腾宇的个人博客">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/blog/">
    <link rel="dns-prefetch" href="https://gitee.com/bingtengaoyu/blog">
    <!--SEO-->

    <meta name="keywords" content>


    <meta name="description" content="Node 开发npm脚手架（类似vue-cli）@(作者)[腾宇]

npm install tengyu-cli -g
源码已经上传码云：https://gitee.com/bingtenga...">



<meta name="robots" content="all">
<meta name="google" content="all">
<meta name="googlebot" content="all">
<meta name="verify" content="all">

    <!--Title-->


<title>Node 开发npm脚手架（类似vue-cli） | 腾宇的个人博客</title>


    <link rel="alternate" href="/atom.xml" title="腾宇的个人博客" type="application/atom+xml">


    <link rel="icon" href="/favicon.ico">

    



<link rel="stylesheet" href="/blog/css/bootstrap.min.css?rev=3.3.7">
<link rel="stylesheet" href="/blog/css/font-awesome.min.css?rev=4.5.0">
<link rel="stylesheet" href="/blog/css/style.css?rev=@@hash">




    
	<div class="hide">
		<script type="text/javascript">
			var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
		</script>
	</div>






    

</head>

</html>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->

<body>
    <header class="main-header"  style="background-image:url(http://snippet.shenliyang.com/img/banner.jpg)"  >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='耿兵兵'>
            <img src="/blog/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
        	<!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
                 <img src="/blog/img/branding.png" alt="Snippet 博客主题" class="img-responsive center-block">
            
    	</div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                    <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="https://gitee.com/bingtengaoyu/blog">腾宇的个人博客</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                            <li role="presentation" class="text-center">
                                <a href="/blog"><i class="fa "></i>Home</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="https://bingtengaoyu.gitee.io/vuetools/#/"><i class="fa "></i>vue插件</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="https://bingtengaoyu.gitee.io/reactantd/#/"><i class="fa "></i>reactAnt模板</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="https://bingtengaoyu.gitee.io/home/"><i class="fa "></i>简介</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="http://gank.io/"><i class="fa "></i>工具</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/blog/archives/"><i class="fa "></i>时间轴</a>
                            </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="Node 开发npm脚手架（类似vue-cli）">
            
	            Node 开发npm脚手架（类似vue-cli）
            
        </h1>
        <div class="post-meta">
    
        <span class="categories-meta fa-wrap">
            <i class="fa fa-folder-open-o"></i>
            
        </span>
    

    
        <span class="fa-wrap">
            <i class="fa fa-tags"></i>
            <span class="tags-meta">
                
            </span>
        </span>
    

    
        
        <span class="fa-wrap">
            <i class="fa fa-clock-o"></i>
            <span class="date-meta">2020/03/28</span>
        </span>
        
    
</div>
            
            
    </div>
    
    <div class="post-body post-content">
        <h1 id="Node-开发npm脚手架（类似vue-cli）"><a href="#Node-开发npm脚手架（类似vue-cli）" class="headerlink" title="Node 开发npm脚手架（类似vue-cli）"></a>Node 开发npm脚手架（类似vue-cli）</h1><p>@(作者)[腾宇]</p>
<blockquote>
<p>npm install tengyu-cli -g</p>
<p>源码已经上传码云：<a href="https://gitee.com/bingtengaoyu/tengyu_cli.git">https://gitee.com/bingtengaoyu/tengyu_cli.git</a></p>
</blockquote>
<h3 id="一-构建脚手架思路"><a href="#一-构建脚手架思路" class="headerlink" title="一.构建脚手架思路"></a>一.构建脚手架思路</h3><ol>
<li><p>​    构建脚手架的目的</p>
<p>为了快速构建项目，修改配置信息，达到自动化前端工程的目的</p>
</li>
<li><p>思路：两种方式</p>
<p>第一种方式：从GitHub拉取代码，修改配置，需要在GitHub提供一个可供下载的模板，完成初始化，下载后解压zip包，然后删除zip包，修改配置文件，配置代理，下载依赖，启动项目；</p>
</li>
</ol>
<p>   第二种方式：将压缩后的zip模板放到服务器上，脚手架从服务器下载对应的模板，根据提示输入配置信息，完成初始化，下载后解压zip包，然后删除zip包，修改配置文件，配置代理，下载依赖，启动项目</p>
<h3 id="二-初始化项目"><a href="#二-初始化项目" class="headerlink" title="二. 初始化项目"></a>二. 初始化项目</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></figure>

<h3 id="三-修改package-json入口文件"><a href="#三-修改package-json入口文件" class="headerlink" title="三. 修改package.json入口文件"></a>三. 修改package.json入口文件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">"name"</span>: <span class="string">"tengyu-cli"</span>,</span><br><span class="line">  <span class="string">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="string">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="string">"main"</span>: <span class="string">"index.js"</span>,  <span class="comment">// 入口文件</span></span><br><span class="line">  <span class="string">"bin"</span>: &#123;</span><br><span class="line">    <span class="string">"tengyu"</span>: <span class="string">"index.js"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"scripts"</span>: &#123;</span><br><span class="line">    <span class="string">"serve"</span>: <span class="string">"node index.js"</span>,</span><br><span class="line">    <span class="string">"dev"</span>: <span class="string">"node index.js"</span>,</span><br><span class="line">    <span class="string">"start"</span>: <span class="string">"node index.js"</span>,</span><br><span class="line">    <span class="string">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"author"</span>: <span class="string">"gengbingbing"</span>,</span><br><span class="line">  <span class="string">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="string">"dependencies"</span>: &#123;</span><br><span class="line">    <span class="string">"chalk"</span>: <span class="string">"^3.0.0"</span>,</span><br><span class="line">    <span class="string">"commander"</span>: <span class="string">"^4.1.1"</span>,</span><br><span class="line">    <span class="string">"cross-spawn"</span>: <span class="string">"^7.0.1"</span>,</span><br><span class="line">    <span class="string">"download-git-repo"</span>: <span class="string">"^3.0.2"</span>,</span><br><span class="line">    <span class="string">"handlebars"</span>: <span class="string">"^4.7.3"</span>,</span><br><span class="line">    <span class="string">"inquirer"</span>: <span class="string">"^7.0.4"</span>,</span><br><span class="line">    <span class="string">"log-symbols"</span>: <span class="string">"^3.0.0"</span>,</span><br><span class="line">    <span class="string">"ora"</span>: <span class="string">"^4.0.3"</span>,</span><br><span class="line">    <span class="string">"request"</span>: <span class="string">"^2.88.2"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="四-下载依赖"><a href="#四-下载依赖" class="headerlink" title="四. 下载依赖"></a>四. 下载依赖</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install</span><br></pre></td></tr></table></figure>

<h3 id="五-开始编写脚手架（直接上源码）"><a href="#五-开始编写脚手架（直接上源码）" class="headerlink" title="五. 开始编写脚手架（直接上源码）"></a>五. 开始编写脚手架（直接上源码）</h3><p>index.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> program = <span class="built_in">require</span>(<span class="string">'commander'</span>);       <span class="comment">//设计命令行</span></span><br><span class="line"><span class="keyword">const</span> download = <span class="built_in">require</span>(<span class="string">'download-git-repo'</span>);      <span class="comment">//github仓库下载</span></span><br><span class="line"><span class="keyword">const</span> inquirer = <span class="built_in">require</span>(<span class="string">'inquirer'</span>);       <span class="comment">//命令行答询</span></span><br><span class="line"><span class="keyword">const</span> handlebars = <span class="built_in">require</span>(<span class="string">'handlebars'</span>);       <span class="comment">//修改字符</span></span><br><span class="line"><span class="keyword">const</span> ora = <span class="built_in">require</span>(<span class="string">'ora'</span>);         <span class="comment">//命令行中加载状态标识</span></span><br><span class="line"><span class="keyword">const</span> chalk = <span class="built_in">require</span>(<span class="string">'chalk'</span>);     <span class="comment">//命令行输出字符颜色</span></span><br><span class="line"><span class="keyword">const</span> logSymbols = <span class="built_in">require</span>(<span class="string">'log-symbols'</span>);      <span class="comment">//命令行输出符号</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</span><br><span class="line"><span class="keyword">const</span> request = <span class="built_in">require</span>(<span class="string">'request'</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; resolve &#125; = <span class="built_in">require</span>(<span class="string">"path"</span>);</span><br><span class="line"><span class="keyword">const</span> install = <span class="built_in">require</span>(<span class="string">"./utils/install"</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(chalk.green(<span class="string">`</span></span><br><span class="line"><span class="string">                           tengyu cli 命令</span></span><br><span class="line"><span class="string">    ------------------------------------------------------------</span></span><br><span class="line"><span class="string">       tengyu init &lt;template name&gt; projectName  |  初始化项目 </span></span><br><span class="line"><span class="string">       tengyu -V                                |  查看版本号    </span></span><br><span class="line"><span class="string">       tengyu -h                                |  查看帮助      </span></span><br><span class="line"><span class="string">       tengyu list                              |  查看模板列表  </span></span><br><span class="line"><span class="string">       tengyu download                          |  下载zip模板  </span></span><br><span class="line"><span class="string">    ------------------------------------------------------------</span></span><br><span class="line"><span class="string">`</span>));</span><br><span class="line"><span class="comment">// 可用模板</span></span><br><span class="line"><span class="keyword">const</span> templates = &#123;</span><br><span class="line">    <span class="string">'react-npm-template'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://gitee.com/bingtengaoyu/reactAntd'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://gitee.com:bingtengaoyu/reactAntd#master'</span>,</span><br><span class="line">        description: <span class="string">'react基础模板'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'vue-tools'</span>: &#123;</span><br><span class="line">        url: <span class="string">'https://gitee.com/bingtengaoyu/vueTools'</span>,</span><br><span class="line">        downloadUrl: <span class="string">'https://gitee.com:bingtengaoyu/vueTools#master'</span>,</span><br><span class="line">        description: <span class="string">'vue常用组件'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// tengyu -V|--version</span></span><br><span class="line">program.version(<span class="string">'1.0.0'</span>);  <span class="comment">// -v|--version时输出版本号0.1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// tengyu init &lt;template&gt; &lt;project&gt;</span></span><br><span class="line">program</span><br><span class="line">    .command(<span class="string">'init &lt;template&gt; &lt;project&gt;'</span>)</span><br><span class="line">    .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">    .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(templateName, templates);</span><br><span class="line">        <span class="keyword">let</span> downloadUrl = templates[templateName].downloadUrl;</span><br><span class="line">        <span class="comment">//下载github项目，下载墙loading提示</span></span><br><span class="line">        <span class="keyword">const</span> spinner = ora(<span class="string">'正在下载模板...'</span>).start();</span><br><span class="line">        <span class="comment">//第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone</span></span><br><span class="line">        download(downloadUrl, projectName, &#123; <span class="attr">clone</span>: <span class="literal">true</span> &#125;, err =&gt; &#123;</span><br><span class="line">            <span class="keyword">if</span> (err) &#123;</span><br><span class="line">                <span class="built_in">console</span>.log(logSymbols.error, chalk.red(<span class="string">'项目模板下载失败\n   只能下载list列表中有的模板'</span>));</span><br><span class="line">                <span class="built_in">console</span>.log(err);</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                spinner.succeed(<span class="string">'项目模板下载成功'</span>);</span><br><span class="line">                <span class="comment">//命令行答询</span></span><br><span class="line">                inquirer.prompt([</span><br><span class="line">                    &#123;</span><br><span class="line">                        type: <span class="string">'input'</span>,</span><br><span class="line">                        name: <span class="string">'appid'</span>,</span><br><span class="line">                        message: <span class="string">'请输入appid'</span>,</span><br><span class="line">                        <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                    &#125;,</span><br><span class="line">                    &#123;</span><br><span class="line">                        type: <span class="string">'input'</span>,</span><br><span class="line">                        name: <span class="string">'name'</span>,</span><br><span class="line">                        message: <span class="string">'请输入项目名称'</span>,</span><br><span class="line">                        <span class="keyword">default</span>: projectName</span><br><span class="line">                    &#125;,</span><br><span class="line">                    &#123;</span><br><span class="line">                        type: <span class="string">'input'</span>,</span><br><span class="line">                        name: <span class="string">'description'</span>,</span><br><span class="line">                        message: <span class="string">'请输入项目简介'</span>,</span><br><span class="line">                        <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                    &#125;,</span><br><span class="line">                    &#123;</span><br><span class="line">                        type: <span class="string">'input'</span>,</span><br><span class="line">                        name: <span class="string">'author'</span>,</span><br><span class="line">                        message: <span class="string">'请输入作者名称'</span>,</span><br><span class="line">                        <span class="keyword">default</span>: <span class="string">''</span></span><br><span class="line">                    &#125;</span><br><span class="line">                ]).then(<span class="function"><span class="params">answers</span> =&gt;</span> &#123;</span><br><span class="line">                    <span class="comment">//根据命令行答询结果修改package.json文件</span></span><br><span class="line">                    <span class="keyword">let</span> packsgeContent = fs.readFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, <span class="string">'utf8'</span>);</span><br><span class="line">                    <span class="keyword">let</span> packageResult = handlebars.compile(packsgeContent)(answers);</span><br><span class="line">                    fs.writeFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/package.json`</span>, packageResult);</span><br><span class="line">                    <span class="built_in">console</span>.log(packageResult)</span><br><span class="line">                    fs.writeFileSync(<span class="string">`<span class="subst">$&#123;projectName&#125;</span>/config.js`</span>, <span class="string">`module.exports = <span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(answers)&#125;</span>`</span>);</span><br><span class="line"></span><br><span class="line">                    <span class="built_in">console</span>.log(logSymbols.success, chalk.green(<span class="string">'项目初始化成功，开始下载依赖...'</span>));</span><br><span class="line"></span><br><span class="line">                    install(&#123; <span class="attr">cwd</span>: <span class="string">`<span class="subst">$&#123;resolve(<span class="string">'./'</span>)&#125;</span>/<span class="subst">$&#123;projectName&#125;</span>`</span> &#125;).then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">                        <span class="built_in">console</span>.log(logSymbols.success, chalk.green(<span class="string">'项目依赖下载成功！'</span>));</span><br><span class="line">                    &#125;);</span><br><span class="line"></span><br><span class="line">                    <span class="comment">//用chalk和log-symbols改变命令行输出样式</span></span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 下载zip模板</span></span><br><span class="line">program</span><br><span class="line">    .command(<span class="string">'download'</span>)</span><br><span class="line">    .description(<span class="string">'初始化项目模板'</span>)</span><br><span class="line">    .action(<span class="function">(<span class="params">templateName, projectName</span>) =&gt;</span> &#123;</span><br><span class="line">        inquirer.prompt([</span><br><span class="line">            &#123;</span><br><span class="line">                type: <span class="string">'input'</span>,</span><br><span class="line">                name: <span class="string">'project_name'</span>,</span><br><span class="line">                message: <span class="string">'请输入项目名称'</span>,</span><br><span class="line">                <span class="keyword">default</span>: <span class="string">'tengyu-template'</span></span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                type: <span class="string">'list'</span>,</span><br><span class="line">                name: <span class="string">'template_name'</span>,</span><br><span class="line">                message: <span class="string">'请选择需要下载的模板'</span>,</span><br><span class="line">                choices: [</span><br><span class="line">                    <span class="string">'react快速开发模板'</span>,</span><br><span class="line">                    <span class="string">'vue工具集'</span></span><br><span class="line">                ],</span><br><span class="line">                <span class="keyword">default</span>: <span class="string">'react-npm-template'</span></span><br><span class="line">            &#125;</span><br><span class="line">        ]).then(<span class="function"><span class="params">answers</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">let</span> url = <span class="string">''</span></span><br><span class="line">            <span class="keyword">switch</span> (answers.template_name) &#123;</span><br><span class="line">                <span class="keyword">case</span> <span class="string">'react快速开发模板'</span>:</span><br><span class="line">                    url = templates[<span class="string">'react-npm-template'</span>].url;</span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">                <span class="keyword">case</span> <span class="string">'vue工具集'</span>:</span><br><span class="line">                    url = templates[<span class="string">'vue-tools'</span>].url;</span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">                <span class="keyword">default</span>:</span><br><span class="line">                    url = templates[<span class="string">'react-npm-template'</span>].url</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            <span class="function"><span class="keyword">function</span> <span class="title">downloadFile</span>(<span class="params">uri, fileName, callback</span>) </span>&#123;</span><br><span class="line">                <span class="keyword">var</span> stream = fs.createWriteStream(fileName);</span><br><span class="line">                request(uri).pipe(stream).on(<span class="string">'close'</span>, callback);</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            downloadFile(url, <span class="string">`<span class="subst">$&#123;answers.project_name&#125;</span>.zip`</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(logSymbols.success, chalk.green(<span class="string">`<span class="subst">$&#123;answers.template_name&#125;</span>下载完毕！`</span>));</span><br><span class="line">                <span class="keyword">return</span></span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// tengyu list</span></span><br><span class="line">program</span><br><span class="line">    .command(<span class="string">'list'</span>)</span><br><span class="line">    .description(<span class="string">'查看所有可用模板'</span>)</span><br><span class="line">    .action(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(chalk.green(<span class="string">`</span></span><br><span class="line"><span class="string">                              tengyu 模板</span></span><br><span class="line"><span class="string">            -----------------------------------------------</span></span><br><span class="line"><span class="string">                 react-npm-template   react快速开发模板  </span></span><br><span class="line"><span class="string">                 vue-tools            vue工具集</span></span><br><span class="line"><span class="string">            -----------------------------------------------</span></span><br><span class="line"><span class="string">        `</span>))</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">program.parse(process.argv);</span><br></pre></td></tr></table></figure>

<p>util-install.js文件（用于下载依赖）</p>
<p>使用cross-spawn模块进行自定义cmd命令的编写</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> spawn = <span class="built_in">require</span>(<span class="string">"cross-spawn"</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span> <span class="title">install</span>(<span class="params">options</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> cwd = options.cwd || process.cwd();</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> command = options.isYarn ? <span class="string">"yarn"</span> : <span class="string">"npm"</span>;</span><br><span class="line">        <span class="keyword">const</span> args = [<span class="string">"install"</span>, <span class="string">"--save"</span>, <span class="string">"--save-exact"</span>, <span class="string">"--loglevel"</span>, <span class="string">"error"</span>];</span><br><span class="line">        <span class="keyword">const</span> child = spawn(command, args, &#123; cwd, <span class="attr">stdio</span>: [<span class="string">"pipe"</span>, process.stdout, process.stderr] &#125;);</span><br><span class="line"></span><br><span class="line">        child.once(<span class="string">"close"</span>, code =&gt; &#123;</span><br><span class="line">            <span class="keyword">if</span> (code !== <span class="number">0</span>) &#123;</span><br><span class="line">                reject(&#123;</span><br><span class="line">                    command: <span class="string">`<span class="subst">$&#123;command&#125;</span> <span class="subst">$&#123;args.join(<span class="string">" "</span>)&#125;</span>`</span></span><br><span class="line">                &#125;);</span><br><span class="line">                <span class="keyword">return</span>;</span><br><span class="line">            &#125;</span><br><span class="line">            resolve();</span><br><span class="line">        &#125;);</span><br><span class="line">        child.once(<span class="string">"error"</span>, reject);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>至此一个简单的脚手架已经开发完成</p>
<p>npm link之后即可在本地进行试运行了</p>
<h3 id="六-发布npm库"><a href="#六-发布npm库" class="headerlink" title="六. 发布npm库"></a>六. 发布npm库</h3><ol>
<li><p>设置自己的npm代理，不要设置为了淘宝代理等；</p>
</li>
<li><p>去npm注册自己的账号；</p>
</li>
<li><p>上传自己的npm脚手架</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm login <span class="comment">// 登录</span></span><br><span class="line"></span><br><span class="line">npm publish <span class="comment">// 推送自己的脚手架到npm库</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>大功告成，可以下载自己的npm插件了。</p>
</li>
</ol>

    </div>
    
    <div class="post-footer">
        <div>
            
                转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © <a href="" target="_blank">Snippet</a>
            
        </div>
        <div>
            
        </div>
    </div>
</article>

<div class="article-nav prev-next-wrap clearfix">
    
        <a href="/blog/2020/04/12/egg-sequelize/" class="pre-post btn btn-default" title=''>
            <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
            <span class="hidden-xs"></span>
        </a>
    
    
        <a href="/blog/2019/09/15/React 发布npm插件库/" class="next-post btn btn-default" title='React 发布npm插件库'>
            <span class="hidden-lg">下一篇</span>
            <span class="hidden-xs">React 发布npm插件库</span><i class="fa fa-angle-right fa-fw"></i>
        </a>
    
</div>


    <div id="comments">
        
	
    <div id="vcomments" class="valine"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="/blog/assets/valine.min.js"></script>

    <script>
        new Valine({
            av: AV,
            el: '#vcomments',
            appId: 'xOKV9J4UeQAtVkvnJC7Kq2Jn-gzGzoHsz',
            appKey: 'erIpQac4azoCmgfBB7Dl9maa',
            placeholder: '说点什么吧',
            notify: false,
            verify: true,
            avatar: 'mm',
            meta: 'nick,mail'.split(','),
            pageSize: '10',
            path: window.location.pathname,
            lang: ''.toLowerCase()
        })
    </script>


    </div>





                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">Table of Contents</h3>
        
            <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Node-开发npm脚手架（类似vue-cli）"><span class="toc-text">Node 开发npm脚手架（类似vue-cli）</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#一-构建脚手架思路"><span class="toc-text">一.构建脚手架思路</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#二-初始化项目"><span class="toc-text">二. 初始化项目</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#三-修改package-json入口文件"><span class="toc-text">三. 修改package.json入口文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#四-下载依赖"><span class="toc-text">四. 下载依赖</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#五-开始编写脚手架（直接上源码）"><span class="toc-text">五. 开始编写脚手架（直接上源码）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#六-发布npm库"><span class="toc-text">六. 发布npm库</span></a></li></ol></li></ol></li></ol>
        
    </div>
</aside>

                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>

<a id="back-to-top" class="icon-btn hide">
	<i class="fa fa-chevron-up"></i>
</a>




    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
</div>

            </div>
            <div class="col-sm-12">
                <span>Copyright &copy; 2017
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>







<script src="/blog/js/app.js?rev=@@hash"></script>

</body>
</html>